<template>
  <div :class="tabsData.length > 1 ? 'leaderboa_box_main_left1' : 'leaderboa_box_main_left2'" v-if="pageShow">
    <div class="org_person">
      <div class="org_person_left" v-if="tabsData.length > 1">
        <div class="org_person_left_tips">
          <span class="iconfont icon-pdzuzhijiagou"></span>
          部门
        </div>
        <div class="org_person_left_info">
          <el-scrollbar class="full_height">
            <div v-for="(org, index) in tabsData" :key="index" @click="orgCli(org, index)">
              <div class="org_person_left_name" :class="{ active_select1: org.id == orgActiveId }">
                <span :class="org.id == orgActiveId ? 'org_person_left_name-1' : 'org_person_left_name-2'"></span>
                <span>{{ org.orgName }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="org_person_right" :class="tabsData.length <= 1 ? 'full_width' : 'half_width'">
        <div class="org_person_right_tips">
          {{ orgActiveName }}
          <span>({{ listData.length }}人)</span>
        </div>
        <div class="org_person_right_main">
          <el-scrollbar class="full_height">
            <div
              v-for="(item, index) in listData"
              :key="item.userId"
              @click="goPerson(item, index)"
              class="org_person_right_item"
              :class="{ active_select2: item.userId == personActiveId }">
              <div class="org_person_right_info">
                <div class="user_heade">
                  <el-avatar
                    slot="reference"
                    class="user-icon"
                    :src="item.headUrl"
                    size="medium"
                    v-if="item.headUrl"></el-avatar>
                  <el-avatar
                    slot="reference"
                    class="user-icon"
                    :src="item.gender === '2' ? circleUrlW : circleUrlM"
                    size="medium"
                    v-else></el-avatar>
                </div>
                <div class="user_info">
                  <div class="user_name">{{ item.userName }}</div>
                  <div :class="item.id == personActiveId ? 'active_select2' : 'user_job'">{{ item.orgName }}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlistLookOrgan, getlistLookUser } from '@apis/board.js'
import { mapGetters } from 'vuex'
export default {
  name: 'OrgPersonList',
  components: {},
  props: {},
  data() {
    return {
      // 分管机构
      tabsData: [],
      // 人员列表
      listData: [],
      // 选中机构ID
      orgActiveId: '',
      // 选中机构name
      orgActiveName: '',
      // 选中人员ID
      personActiveId: '',
      // 当前登录人员信息
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      // 是否显示机构人员切换
      pageShow: true,
      // 评价跳转纪实路由参数
      evaluateRouter: {},
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
  },
  created() {
    this.evaluateRouter = this.$route.query
  },
  mounted() {
    if (this.isNormalRole) {
      this.$emit('getPerson', this.userInfo.userId)
      this.pageShow = false
    } else {
      this.pageInit()
    }
  },
  methods: {
    async pageInit() {
      const { data } = await getlistLookOrgan({
        optionUserId: this.userInfo.userId,
        tenantId: this.userInfo.tenantId,
      })
      if (data.length) {
        this.tabsData = data
        if (this.evaluateRouter.orgId) {
          for (let i = 0; i < this.tabsData.length; i++) {
            if (this.tabsData[i].id === this.evaluateRouter.orgId) {
              this.orgActiveId = this.tabsData[i].id
              this.orgActiveName = this.tabsData[i].orgName
              this.getPeInfo(this.tabsData[i].id)
              break
            }
          }
        } else {
          if (this.tabsData.length) {
            this.orgActiveId = this.tabsData[0].id
            this.orgActiveName = this.tabsData[0].orgName
            this.getPeInfo(this.tabsData[0].id)
          } else {
            this.$emit('getPerson', this.userInfo.userId)
            this.pageShow = false
          }
        }
      } else {
        // 个人
        this.$emit('getPerson', this.userInfo.userId)
        this.pageShow = false
      }
    },
    // 获取人员信息
    async getPeInfo(id) {
      const { data } = await getlistLookUser({
        id: id,
        optionUserId: this.userInfo.userId,
        tenantId: this.userInfo.tenantId,
      })
      this.listData = data

      if (this.evaluateRouter.userId) {
        // 评价页面跳转过来
        this.personActiveId = this.evaluateRouter.userId
      } else {
        this.personActiveId = this.listData[0].userId
      }
      // noteId:评价页面跳转传递参数
      this.$emit('getPerson', this.personActiveId, this.evaluateRouter.noteId)
    },
    // 机构切换方法
    orgCli(item) {
      this.orgActiveName = item.orgName
      this.orgActiveId = item.id
      this.getPeInfo(item.id)
    },
    // 人员切换方法
    goPerson(item) {
      this.personActiveId = item.userId
      this.$emit('getPerson', this.personActiveId)
    },
  },
}
</script>

<style lang="scss" scoped>
.leaderboa_box_main_left1 {
  width: 360px;
  height: 100%;
  border-right: 1px solid #e4eaf0;
}
.leaderboa_box_main_left2 {
  width: 240px;
  height: 100%;
  border-right: 1px solid #e4eaf0;
}

.org_person {
  height: 100%;
  width: 100%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  .org_person_left {
    width: 160px;
    height: 100%;
    // border: 1px solid #dcdfe6;
    background-color: #e6eef6;
  }
  .org_person_left_tips {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    color: #546478;
    font-size: 18px;
    border-bottom: 1px solid #ececec;
  }
  .org_person_left_info {
    height: calc(100% - 50px);
    // overflow-y: auto;
    // padding:0 10px;
    /deep/ .el-scrollbar__wrap {
      // padding: 0 10px;
    }
  }
  .org_person_right_main {
    height: calc(100% - 50px);
  }
  .org_person_right {
    height: 100%;
    border: 1px solid #dcdfe6;
    &.half_width {
      width: 200px !important;
    }
  }
  .org_person_right_tips {
    height: 50px;
    line-height: 50px;
    color: #1852a3;
    font-size: 18px;
    padding: 0 20px;
    span {
      font-size: 14px;
    }
  }
  .active_select1 {
    background-color: #cadcef;
    color: #0060c4;
  }

  .org_person_left_name {
    line-height: 40px;
    // padding: 0 12%;
    padding-left: 10px;
    cursor: pointer;
    display: flex;
  }
  .org_person_left_name-1 {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #0060c4;
    margin: 18px 5px 0 0;
  }
  .org_person_left_name-2 {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #c8c8c8;
    margin: 18px 5px 0 0;
  }
  .org_person_right_item {
    padding: 0 20px;
  }
  .org_person_right_info {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    color: #333333;
    .user_heade {
      margin-right: 20px;
      width: 45px;
      height: 45px;
      /deep/.user-icon {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
        }
      }
    }
    .user_job {
      color: #808080;
    }
  }
  .active_select2 {
    background-color: #0060c4;
    .org_person_right_info {
      color: #ffffff;
      border-color: #0060c4;
      .user_job {
        color: #ffffff;
      }
    }
  }
}
</style>
